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This talk is about rendering implicit 
functions, but it's still totally cool if you 
don't know math or code. 

This talk is about art, too. 
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Live demos to play with. 
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npiled successfully 




1 #ifdef GL_ES 

2 precision mediump float; 

3 #endif 

4 

5 # extension GL_OES_standard_derivatives : enable 

6 

7 uniform float time; 

8 uniform vec2 mouse; 

9 uniform vec2 resolution; 

10 

11 void main( void ) { 

12 

13 vec2 position = ( gl_FragCoord . xy / resolution. xy ) + mouse / 4.0; 

14 

15 float color = 0.0; 

16 color += sin( position. x * cos( time / 15.0 ) *80.0)+ cos( position. y * cos( time / 15.0 ) * 10.0 ); 

17 color += sin( position. y * sin( time /10.0) *40.0)+ cos( position. x * sin( time / 25.0 ) * 40.0 ); 

18 color += sin( position. x * sin( time / 5.0 ) * 10.0 ) + sin( position. y * sin( time / 35.0 ) * 80.0 ); 

19 color *= sin( time / 10.0 ) * 0.5; 

20 

21 gl_FragColor = vec4( vec3 ( color , color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 ); 

22 

23 } 


GLSL Sandbox 









H II 51.99 44.6 fps 
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Raymarching - Primitives 
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<S> 58441 ¥319 940 


Uploaded by iq in 2013-Mar-25 
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A set of primitives and combination functions, for reference. More info here: 

http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm 


Sha 


float dom = smoothstep( -0.1, 0.1, ref.y ); 



Doublefresh, 2016-Feb-13 

What does the 'c' parameter in sdCone do? 


Browse Live New Shader Sign In 


Image 


* Shader Inputs 


1 // Created by inigo quilez - iq/2013 

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 

3 

//A list of usefull distance function to simple primitives, and an example on how to 

5 //do some interesting boolean operations, repetition and displacement. 

6 // 

// More info here: http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm 

8 

float sdPlane( vec3 p ) 

10 ▼ { 

11 return p,y; 

12 > 

13 

14 float sdSphere( vec3 p, float s ) 

15 ▼ { 

16 return length (p)-s; 

17 > 

18 

19 float sdBox( vec3 p, vec3 b ) 

20 ▼ { 

21 vec3 d = abs(p) - b; 

return min(max(d.x,max(d.y,d.z) ) ,0.0) + length (max (d,0 . 0) ) ; 

23 > 

24 

float sdEllipsoid( in vec3 p in vec3 r ) 

26 ▼ { 

return (length( p/r ) - 1.0) * min(min(r x,r y) ,r z) ; 

28 > 

29 

float udRoundBox( vec3 p, vec3 b float r ) 

31 ▼ { 

return length (max (abs (p)-b,0.0))-r; 

33 > 

34 

float sdTorus( vec3 p, vec2 t ) 



ngth(p xz)-t.x,p y) 


)-t y; 
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Quiet Steps by keyboarders 
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Many Cubes 
Much Techno 
C64/Am i g a/G P U 
Procedural 


Still Relevant 



nuGocyopcxc 







Discovered tons of crazy stuff. 








2500 years ago 
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Straight edge (and compass.) 



Pythagoras 

Spawned numerous math cults 









This is the point of the talk 









How far apart are they? 
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Time for math 
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But it's hard to measure math against art 
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That blue line isn't one or the other. 
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A* A + 









sqrt(A*A + B*B) 






C = distance( 
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distance(A, B) 




This circle is the same distance in every direction 
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Sphere Tracing 

Sphere tracing is a form of raytracing 
(there are many.) 



Sphere Tracing 

Sphere tracing is a form of raytracing 
(there are many.) 


It is ideal for implicit functions. 
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Sphere Tracing 

Sphere tracing is a form of raytracing 
(there are many.) 


It is ideal for implicit functions. 


It is not a replacement for rasterization or voxels 




It is inefficient. 


iph 
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Sphere Trad 

It is inefficient. 


But, it is simple. 
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Sphere Tracing 

It is inefficient. 



And it is extremely flexible. 
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Construct the view. 
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Construct the view 


Trace the ray. 
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Sphere Tracing 

4 Steps 


Construct the view. 


Trace the ray. 

Determine which way the surface is facing. 
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Sphere Tracing 

4 Steps 


Construct the view. 


Trace the ray. 

Determine which way the surface is facing. 


Add light. 






Constructing the view. 









UV coordinates. 




That's all you need. 




Now let's code! 



vec2 screen_coordi nates = gl_FragCoord . xy ; 

screen_coordi nates /= resolution; 

sareendoorjdi nates = screen_coordi nates - . 5 : 

screen_coordi nates * = resolution/mi n ( resolution . x , resoluti on . y) 

float field oil vilew 1111= ll . 5 :1 1 I 1 1 1 1 1 1 1 I I I 


vec3 direction = H e<= 3K screen coordinates, field bf k/iew); 

d~jrejtictn 1111111= n|orrrialilze(ldTr|ect|ion|) ; I 1 111 I 




vec2 screen_coordi nates 
screen_coordi nates 
screen_coordi nates 

screen_coordi nates 


float field of view 


vec3 di recti o n 
di recft i on 


= gl_FragCoord . xy ; 

/= resolution; 

= screen_coordi nates - . 5 ; 

*= resolution/min(resolution.x 


. 5 : 


= vec3(sc re e n coordin a t e s, field bf 
= rlorrrial ilze (IdTrlec tli onl) : I I I I 

































vec2 screen_coordi nates = gl_FragCoord . xy ; 

screen_coordi nates /= resolution; 

screen_coordi nates = screen_coordi nates - .5; 

screen_coordi nates *= resolution/min(resolution.x, resolut i on . y) 


f lo a t f i e 1 d_o f lyh ew 

vec3 direction 
di recti on \ 


Ml. 5: 

= vec3(screen coordinates , f 

f Inornial i ie (di r^cti on) ; 


el d of view 


Orthogonal Rays 






vec2 screen_coordi nates = gl_FragCoord . xy ; 

screen_coordi nates /= resolution; 

screen_coordi nates = screen_coordi nates - .5; 

screen_coordi nates *= resolution/min(resolution.x, resolut i on . y) 

float f i eldofvi ew = 1.5; 

vec3 (screencpordi nates , f i eld_of_vi ew) ; 
nor mal i ze (di r ecti on) ; ! I 1 i ~l 1 







Zoom 









(A jump to 3D for a moment.) 




■uEhb 


vec2 screen_coordi nates 
screen_coordi nates 
screen_coordi nates 
screen coordinates 


= gl_FragCoord . xy ; 

/= resolution; 

= screen_coordi nates - .5; 

*= resoluti on/mi n ( resoluti on . x , resolut i on . y) 


float field of view 


vec3 direction 
di recti on 


vec3 (screen_coordi nates , f i eld_of_vi ew) 
normalize(direction) ; 










Trace the ray. 




vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i =0; i < 128; i++) 

float di stance_to_surf ace =-4fta^f(posi t i on) ; 

i f (di stance_to_surf ace < surf ace_threshold) break; 

position* += direction * di stance_to_surf ace ; 

} 

float di stance_to_scene = di stance (ori gi n , position); 





vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i = 0; i < 128; i++) 

float distance to surface 


(posi ti on) ; 


if(distance to surface < surface threshold) break; 


posi tfcfn 


+= 


isrection * distance to surface; 


float di stanpe_to_scene = di stance (ori gi n , position); 


/ 
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vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = . 001 ; 
for(int i = 0 ; i < 128 ; i++) 

{ 

float di stance_to_surf ace = map (posi ti on) ; 
i f (di stance_to_surf ace < surf ace_threshold) break; 
posit +=^direction * di stance_to_surf ace ; 


float distance to scene = di stance (ori gi n , position); 


Wi 


Wa 


fi 
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YA 


II 











vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i = 0; i < 128; i++) 

{ 

float di stance_to_surf ace = map (posi ti on) ; 
i f (di stance_to_surf ace < surf ace_threshold) break; 

positfcfn += direction * di stance_to_surf ace ; 

\ \ 

1 / \ 

float di stance_to_scene = d\ stance (ori gi n , position); 
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vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i = 0; i < 128; i++) 

{ 

float distance to surface 


= map (posi ti on) ; 


i f (di stance_to_surf ace < surf ace_threshold) break; 
position += direction * di stance_to_surf ace ; 


float di stanpe_to_scene = dj stance (ori gi n , position); 
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vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i = 0; i < 128; i++) 

{ v y 

float di stance_to_surf ace = map (posi ti on) ; 
i f (di stance_to_surf ace < surf ace_threshold) break; 
position += direction * di stance_to_surf ace ; 


float di stanpe_to_scene = d| stance (ori gi n , position); 










vec2 origin 
vec2 position 


= vec2 (0 . ) ; 
= origin; 


float surf ace_threshold = .001; 
for(int i =0; i < 128; i++) 

{ 1 - -X J 

float di stance_to_surf ace = map (posi t i on) ; 
i f (di stance_to_surf ace < surf ace_threshold) break; 

position += direction * di stance_to_surf ace ; 

} / \ 

float di stance_to_scene = di stance (ori gi n , position); 







Determine the surface is face. 
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(The "normal.") 




Take samples nearby the end of the ray, and 
compare them for the partial derivative. 



vec2 normal 
normal . x 

normal . y 


vec2 (0 . ) ; 

map(posirion + 2 ( . 0 1 , 0.)) 
map (posi ti on + vec2(0., .01)) 


normal 


= normal i ze (normal ) ; 


- map (posi ti on - vec2(.0d, 0.)) 

- map(position - vec2 (0 . \ . 01) ) 
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Wi 












Wi 


Beio 


vec2 normal 
normal . x 
normal . y 


vec2 (0 . ) ; 

map (posi ti on + vec2(.01, 0.)) 
map (posi ti on + vec2(0., .01)) 


normal 


= normal i ze (normal ) ; 



map (posi ti on 

map (posi ti on 


vec2 ( . 01 , 0 . ) ) 

vec2 (0 . \ .01)) 








vec2 normal = vec2(0.); 

normal. x = map (posi ti on + vec2(.01, 0.)) - map (posi ti on - 

normal. y = map (posi ti on + vec2(0., .01)) - map(position - 



normal = normalize(normal) ; 




vec2 ( . 01 , 0 . ) ) 
vec2 (0 . , . 01) ) 








And normalize by dividing by the result 

of the pythagorean theorem. 



vec2 normal 
normal . x 
normal . y 




vec2 (0 . ) ; 

map(position + vec2(.01, 0.)) 
map(position + vec2(0., .01)) 


map(position - vec2(.01, 0.)); 
map(position - vec2(0., .01)); 


normal 


= normal i ze (normal ) ; 





/ 



vec2 normal 
normal . x 
normal . y 



= vec2 (0 . ) ; 

= map (posi ti on + vec2(.01, 0.)) - map (posi ti on - vec2(.01, 0.)) 
= map (posi ti on + vec2(0., .01)) - map(position - vec2(0., .01)) 


normal 


= normal i ze (normal ) ; 





Normals 











Is can be sampled from anywhere in 
t the surfaces. 



































Add light. 




Normals 
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fi 


/ 



vec2 1 i ght_posi ti on 
vec3 light_color 

vec2 1 i ght_di recti on 


= vec2 ( . 6 , 1 . ) ; 

= vec3 ( . 87 , . 8 , . 7) ; 

= normal i ze (1 i ght_posi t i on- posi t i on) 


float di f f use_l i ght = dot(normal, 1 i gh t d i rection) ; 




vec2 1 i ght_posi ti on = vec2(.6, 1.); 

vec3 light_color = vec3(.87, .8, .7); 

vec2 1 i ght_di recti on = normal i ze (1 i ght_posi ti on-posi ti on) 

float di f f use_l i ght = dot(normal, 1 i gh t d i rection) ; 



vec2 1 i ght_posi ti on = vec2(.6, 1.); 

vec3 light_color = vec3(.87, .8, .7); 

vec2 1 i ght_di recti on = normalize(light_position-position) 

float di f f use_l i ght = dot(normal, 1 i gh t d i rection) ; 




Light 






The Map 




The universe is math 




















































































































If the universe is math 




Raytracing is a nice way to visit. 
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mplicit Functions 
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Explicit Data 


Data is stored in memory as independent values 
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Explicit Data 


Data is stored in memory as independent values 


Mesh vertices, texture pixels, etc... 



Explicit Data 

Data is stored in memory as independent values 



Mesh vertices, texture pixels, etc... 


Data is read from memory. 
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icit Functions 





Code is data 


mplicit Functions 



Implicit Functions 


Code is data. 


Everything is procedura . 



Implicit Functions 


Code is data. 



Data is accessed via computation. 




Explicit 












float fold(in float x) 

{ 

return abs(fract(x)-.5); 

} 


vec3 fold(in vec3 p) 

{ 

float x = fold (p . x) ; 

return vec3 (fold (p . z+fold (p . y) ) , fold(p.z+x), f old (p . y+x) ) ; 

} 


float fold_harmoni c (i n vec3 p, const int it) 

{ 

vec3 bp = abs (p) ; 
float rz = 1 . ; 

for (int i =0; i < 32; i++) 

{ 

i f ( i > i t ) break; 
p *= fold (bp) ; 

bp += abs (f ract (bp) ) - rz ; 

rz += dot(fold(p), bp)-rz; 


} 


} 

return rz*float(it) ; 





Y Plane 




float y(float height) 

{ 

return position. y 


- height 


} 




X Plane 




float x(float offset) 

{ 

return position. x - offset 

} 









float sphere(vec2 position, float radius) 

{ 

return length(position)-radius; 


} 
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float cube(vec2 position, vec2 scale) 

{ 


vec2 vertex = abs (posi tion) 
vec2 edge = max(vertex, 0 
float interior = max (vertex . x , 


- scale; 

• ) ; 

vertex . y) 


} 


return min(interior , 0.) + length (edge) ; 
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float prism(vec2 position, float scale) 

{ 

position. y *= 0.57735026918; //I . /sqrt (3 . ) ; 

scale *= 0.57735026918; 

vec3 edge = vec3(0.); 

edge.x = position.y + position.x; 

edge.y = position.x - position.y; 

edge.z = position.y + position.y; 

edge *= .86602540358; //sqrt (3 . ) /2 . ; 


} 


return max(edge.x, max(-edge.y, -edge . z) ) -scale ; 






float torus(vec2 position, vec2 radius) 

{ / \ \ 

return abs(abs(length(position)-radius.x)-radius.y) 


} 





float torus(vec2 position, vec2 radius) 

{ 

return abs(abs(length(position)-radius.x)-radius.y) 

} 
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float fractal(vec2 position, float rotation, float translation, float scale) 

{ If 

const int iterations = 8; 


float radius 


= 1 . 5/float ( i terations) ; 


rotati on 


= rotation * TAU + TAU * .5; 


posi ti on 
posi ti on . y 
scale 

float result 


* - 


abs (posi tion) ; 

= radius; 
radius; 

max (posi tion . x , 


position. y) - scale; 


for (int i 

{ 


= 0; i < iterations; i++) 


float magnitude 


= length (posi tion) ; 


float phase 
phase 


a tan (posi tion . x , posi tion . y) ; 
mod(phase, rotation) - rotation * .5; 


posi ti on . x 
posi tion . y 


magnitude * cos(phase); 
magnitude * sin(phase); 


posi ti on 


= abs (posi tion) ; 


posi ti on . y 

-= translation; 

translation 

*= 7 • 

• ' » 

scale 

*= .8; 

rotation 

* 

II 

l 

• 

<sD 

00 

• 


} 


result 


= mi n (max (posi tion . x , position. y) - scale, 


return result; 


} 


result) 
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m i n ( a 







m i n ( a 











max ( 

















mod (posi ti on , 


scale) - scale * .5 
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float noise(in vec2 uv) 

{ 

const float k 
vec4 1 
1 . zw 

float u 

vec4 v 
v 


1 . x 

i-y 

return mix(l.x, l.y, l.w); 

} 


= 257. ; 

= vec4(f loor (uv) , f ract (uv) ) ; 

= 1 . zw*l . zw* (3 . -2 . *1 . zw) ; 

= 1.x + l.y * k; 

= vec4(u, u+l.,u+k, u+k+1.); 

= f ract (f ract (1 . 23456789*v) *v/ .987654321) 


= mi x (v . x , v . y , 1 . z) ; 
= mi x (v . z , v.w, l.z); 


float f ractal_browni an_moti on (vec2 uv) 

{ 

float amplitude = .5; 
float frequency = 2.; 

float result = 0 . ; 
for(int i = 0; i < 8; i++) 

{ 

result += noi se (uv*f requency) *ampli tude ; 

amplitude *= .5; 

frequency *= 2 . ; 

/ } 


} 


return result; 
































Combine these forms to create models. 
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and we find the surface. 
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m, 















A 











Imagine this is the space we will 
render into. 
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Some say you should avoid noise at 
all costs, as it breaks the rendering. 
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Others disagree. 




Rev ew 





Coordinates 





Normals 




Light 


Go further. 
















Make your world. 







Play! 
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Questions? 

cbirke@gmail.com 


Portfolio 
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• Live Coding Sites 
GLSL Sandbox 


ShaderToy 
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• Demos • 

2D Spheretracer Visualization 
2D Distance Fields 
Basic 3D Spheretracer 
Noise Example 
Procedural City Example 
Compass and Straightedge Model 
Simple Watershed Simulation 


Slides 
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• Distance Field Modeling Resources • 


hg sdf • A library for building signed distance functions. 

How to model with Distance Functions • Johann Korndorfer • NVScene 2015 


Enhanced Sphere Tracing Whitepaper 
Procedural Generation On Reddit 
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Quilez Resources* 


Main Site 


Article on Distance Functions 


Demo Of 3D Distance Functions on ShaderToy 


• formulanimations tutorials • 

Writing a Basic Raytracer 


Making a Snail 
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• Demoscene Links • 

Quiet Steps by keyboarders ♦ Kindergarden 
Conspiracy * Binary Flow 
Digital Dynamite * Tilescapes I Demoscene 
The butterfly effect » Andromeda Software Development 

Photon * Firelight 
Intrinsic Gravity * Still 

Pouet.net 


